在取得ChatGPT提供的程式碼後，為了快速了解，提供一點一開始要先掌握的HTML概念。

可以想像HTML為由各元件排列組合而成的結構，常見元件如<div>、<span>等區塊結構，以及偏向功能型的元件，如<form>、<input>、<select>、<button>、<label>等。相關元件，除了可以參考w3schools網站去查詢外，現今有了ChatGPT的幫忙，其實可以直接詢問請其列出常用元件，就可以查詢得到，在學習上相當有助益。

HTML元件呈現於程式碼的方式，以<div>為例，通常以兩兩一組來呈現，如<div></div>。元件名稱之間，可以再放入新的元件，也可以填入文字，以提供文字說明資訊。當放入的是元件，將形成父子結構（嵌套結構），即父元件之下，還可以再包含數個子元件，參考如下：

<div>
    ...
    <div>
    ...
    </div>
    ...
</div>

• 所包覆的子元件之間，可以再選擇放入新一層的元件，或是填入文字，可無限循環下去，可完成深度複雜層結構。 並且若所填入者為文字，代表該元件內容將呈現文字說明資訊。

要注意的是，未來在進行CSS美化時(渲染)，應區別出「元件區塊」跟「元件內」文字

• 排版相關問題，所處理的是「元件區塊」之間，彼此對齊與堆疊的方式
• 至於說明文字的調整，大小、顏色、文字對齊，則是在處理「元件內」文字格式

兩種美化方式，會用到不同的參數，參數名稱與屬性，在直觀上的文意很相近，在初學很容易搞混，在此先提醒應區別兩者概念，後續提到CSS會再深入介紹。